<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/style.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
    <link rel="stylesheet" href="css/combo.select.css">
    <style>
        .sucaihuo { width: 400px; margin: 100px auto;}
       h1{
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: #000000;}
        h4{
            color: #0a0a0a;
        }

    </style>
</head>
<body class="container" style="font-family: '微软雅黑 Light'">
  <div class="col-md-offset-1">
     <h1 style="padding-bottom: 10px;padding-top: 10px">预约试驾</h1><hr>
     <h4>获取更详尽的车型信息</h4>
     <p>欢迎您在线预约试驾。根据您的需求和喜好，我们将安排客服第一时间与您取得联系并为您答疑解惑，帮助您收获更好的驾乘体验。</p>
      <hr>
  </div>
  <div class="col-md-offset-1">
      <h4 style="padding-bottom: 10px">请选择您想预约的经销商</h4>
      <div class="row">
          <div>
              <div class="row" style="padding-left: 29px;padding-top: 10px;padding-bottom: 10px">
                  <select id="dealer" >
                      <option value="">——————请选择——————</option>
                      <option>天津宝泽行汽车销售服务有限公司</option>
                      <option>天津星德宝汽车销售服务有限公司</option>
                      <option>天津宝诚百旺汽车销售服务有限公司</option>
                      <option>天津宝晋行汽车销售服务有限公司</option>
                      <option>天津宝信行汽车销售服务有限公司</option>
                      <option>天津博瑞宝汽车销售服务有限公司</option>
                      <option>天津美宝行汽车销售服务有限公司</option>
                  </select>
              </div>
          </div>
      </div><hr>
  </div>
  <div class="col-md-offset-1">
      <h4 style="padding-bottom: 10px">请选择您想试驾的车型</h4>
    <div class="row">
        <div>
           <label style="padding-left: 15px">品牌*</label>  <label style="padding-left: 110px">车名</label>
            <br>
            <div class="row" style="padding-left: 29px;padding-top: 10px;padding-bottom: 10px">
                <select class="" id="brand">
                    <option value="">————————</option>
                    <option>奔驰</option>
                    <option>宝马</option>
                    <option>奥迪</option>
                    <option>保时捷</option>
                    <option>欧宝</option>
                    <option>宝沃</option>
                    <option>卡尔森</option>
                    <option>巴博斯</option>
                    <option>迈莎锐</option>
                    <option>柯斯达</option>
                </select>
                <select class="" id="c_name" style="width: 150px">
                </select>
            </div>
        </div>
    </div><hr>
  </div>
  <div class="col-md-offset-1">
     <h4>请填写您的个人信息</h4>
     <div>
       <label   style="padding-right: 110px">称谓*</label>
         <select id="call">
             <option>请选择您的称谓</option>
             <option>先生</option>
             <option>女士</option>
         </select>
     </div>
     <div style="">
         <label  style="padding-right: 109px">姓名*</label>
         <input id="u_name" type="text" name="surname" placeholder="请输入您的姓名" required="">
         </div>
     <div>
         <label  style="padding-right:80px">联系电话*</label>
         <input id="u_phone" type="text" name="phone" placeholder="" required="">
     </div>
     <div class="form-group">
         <label  style="padding-right: 80px">图形验证码*</label>
         <div class="row" style="padding-top: 20px;padding-left: 16px">
             <div id="v_container" style="width: 200px;height: 50px;">
                 　　　　　　　　<canvas id="verifyCanvas" width="200" height="50" style="cursor: pointer;margin-top:-30px;margin-bottom: 10px;"></canvas>
                 　　　　　　</div>
             <div>
                 <input style="" type="text" id="code_input" value="" placeholder="请输入验证码"/>
                 <button id="my_button">验证</button>
             </div>
         </div>

         　　　　　　
      </div>
     </div><hr>
     <div class="col-md-offset-1">
      <input type="checkbox" id="check">
      我同意<a href="/gotoyhtiaozhuan">账户隐私政策 与 账户cookie政策</a>
     </div>
     <br>
     <div class="col-md-offset-1">
     <p>*带星号的选项必须填写</p>
     </div>
     <div class="col-md-offset-1" style="padding-top: 20px;padding-bottom: 20px">
      <button  class="btn btn-info btn-primary-outline" id="bookbtn">预约</button>
     </div>

</body>

<script src="../../js/yanzheng.js"></script>
<script>
    var sctBrand=document.getElementById("brand");
    var sctCname=document.getElementById("c_name");
    var brand,car_name,yanzheng=false,tiaokuan=false;
    var verifyCode = new GVerify("v_container");
    $(document).ready(function () {

        $("#bookbtn").click(function () {
            if (sessionStorage.getItem("u_id")==null){
                alert("请先登录")

            }else {
                if($("#check").is(':checked')){
                    tiaokuan=true;
                }else {
                    alert("请同意账户隐私政策 与 账户cookie政策")
                }
                if(yanzheng&&tiaokuan){
                    $.ajax({
                        url: "../../book/insertBook",
                        type: "get",
                        dataType: "json",
                        async: true,//设置为同步方法
                        data:{
                            b_carbrand:brand,
                            b_carname:car_name,
                            b_call:document.getElementById("call").options[document.getElementById("call").options.selectedIndex].text,
                            b_username:$("#u_name").val(),
                            b_phone:$("#u_phone").val(),
                            u_id:sessionStorage.getItem("u_id"),
                            u_dealer:document.getElementById("dealer").options[document.getElementById("dealer").options.selectedIndex].text


                        },
                        success: function (result) {
                            alert(result.status)
                            yanzheng=false;
                            tiaokuan=false;
                        }
                    });
                }else {
                    alert("验证码错误")
                }

            }
        })

        if(sessionStorage.getItem("c_brand")!=null){
            nochange();
        }
        $("#brand").val(sessionStorage.getItem("c_brand"))

        $("#dealer").val(sessionStorage.getItem("c_dealer"))


        $("#brand").change(function () {
            brand=sctBrand.options[sctBrand.options.selectedIndex].text;
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: true,//设置为同步方法
                data:{
                    b_name: brand
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })

                    }
                }
            });
        })

        //没有change
        function nochange(){
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: true,//设置为同步方法
                data:{
                    b_name: sessionStorage.getItem("c_brand")
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })
                        $("#c_name").val(sessionStorage.getItem("c_name"))
                    }
                }
            });


        }

        $("#c_name").change(function () {
            car_name=sctCname.options[sctCname.options.selectedIndex].text;
            $.ajax({
                url: "../../car/selectAllByName",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    c_name: car_name
                },
                success: function (result) {
                    $("#changshang1").text(result.b_name);
                    $("#jibie1").text(result.t_name);
                    $("#gonglv1").text(result.c_maxpower);
                    $("#niujv1").text(result.c_maxtorque);
                    $("#mali1").text(result.c_maxhorsepower);
                    $("#biansu1").text(result.c_gearbox);
                    $("#jiegou1").text(result.c_structure);
                    $("#pailiang1").text(result.c_displacement);
                    $("#jinqi1").text(result.i_name);
                    $("#zhidong1").text(result.c_braking);
                    $("#img1").attr("src",result.c_surface);
                }

            });
        })
    })
    document.getElementById("my_button").onclick = function(){
        var res = verifyCode.validate(document.getElementById("code_input").value);
        if(res){
            alert("验证正确");
            yanzheng=true;
        }else{
            alert("验证码错误");
        }
    }
</script>
</html>